<template>
  <div class="mod-config">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <b>图表</b>
            <div style="float: right;">
              <el-button type="primary" icon="el-icon-plus" @click="searchReset" circle title="新增"></el-button>
              <el-button type="primary" icon="el-icon-delete" @click="deleteReset" circle title="删除"></el-button>
              <el-button type="primary" icon="el-icon-s-fold" circle title="折叠"></el-button>
            </div>
          </div>
          <el-input class="search" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          <el-tree class="filter-tree" :data="CategOptions" :props="defaultProps" default-expand-all
            :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick">
          </el-tree>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <b>数据集</b>
            <!-- <div style="float: right;">
              <el-button type="primary" icon="el-icon-plus" circle title="新增"></el-button>
              <el-button type="primary" icon="el-icon-info" circle title="详情"></el-button>
            </div> -->
          </div>
          <ul class="field-ul">
            <h3>维度列</h3>
            <draggable v-model="dimensionList" :group="{name: 'field',put: false}" :options="{sort: false}" @end="endDrag">
              <li v-for="(element,index) in dimensionList">
                <span style="margin-right: 10px;">
                  <img src="../../../const/cboard/bullet_blue.png" style="vertical-align: middle;">
                </span>
                <span>{{element.column}}</span>
              </li>
            </draggable>
          </ul>

          <ul class="field-ul">
            <h3>指标列</h3>
            <draggable id="targetList" v-model="targetList" :options="{group:'target'}" @end="endDragTar">
              <li v-for="(element,index) in targetList">
                <span style="margin-right: 10px;">
                  <img src="../../../const/cboard/bullet_red.png" style="vertical-align: middle;">
                </span>
                <span v-if="!element.alias">{{element.column}}</span>
                <span v-if="element.alias">{{element.alias}}({{element.column}})</span>
              </li>
            </draggable>
          </ul>
          <ul class="field-ul">
            <h3>
              <span>可选表达式</span>
            </h3>
            <draggable id="expressionList" v-model="expressionList" :options="{group:'target'}" @end="endDragExp">
              <li v-for="(expItem,expIndex) in expressionList" :key="'exp'+expIndex">
                <span style="margin-right: 10px;">
                  <img src="../../../const/cboard/bullet_red.png" style="vertical-align: middle;">
                </span>
                <span>{{expItem.alias}}</span>
                <input type="hidden" ref="timestamp" name="timestamp" :value="expItem.timestamp">
                <input type="hidden" ref="type" name="type" :value="expItem.type">
                <input type="hidden" ref="exp" name="exp" :value="expItem.exp">
              </li>
            </draggable>
          </ul>

          <ul class="field-ul">
            <h3>
              <span>过滤器</span>
              <el-button class="small-btn" type="info" icon="el-icon-plus" circle title="新增" @click="filterOptAddOrUpdate('add',{})"></el-button>
            </h3>
            <draggable id="filterList" v-model="filterList" :group="{name: 'field',put: false}" :options="{group:'field',sort: false}"
              @end="endDragFilter">
              <li v-for="(optItem,optIndex) in filterList" :key="'opt'+optIndex">
                <span style="margin-right: 10px;">
                  <img src="../../../const/cboard/bullet_red.png" style="vertical-align: middle;">
                </span>
                <span>{{optItem.group}}</span>
                <input type="hidden" ref="timestamp" name="timestamp" :value="optItem.timestamp">
                <input type="hidden" ref="filters" name="filters" :value="optItem.filters">
                <i class="el-icon-edit-outline" style="margin-left: 5px;" @click="filterOptAddOrUpdate('update',optItem)"></i>
                <i class="el-icon-delete" style="margin-left: 5px;" @click="filterItemDelHandle(optIndex)"></i>
                <!-- <span>{{element.name}}</span> -->
              </li>
            </draggable>
          </ul>

        </el-card>
      </el-col>
      <!-- 新增 -->
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <b>新建</b>
          </div>
          <div class="text item" style="padding-right: 20px;">
            <el-form label-width="80px">
              <el-form-item label="选择数据集" v-if="type == 1">
                <el-select v-model="dataForm.datasetName" @change="dataSetOne">
                  <el-option v-for="(item,index) in resultDataSet" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据源类型" v-if="type == 2">
                <el-select v-model="dataForm.datasource">
                  <el-option v-for="item in sour" :key="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="查询语句" v-if="type == 2">
                <code-mirror :value="dataForm.sentence" ref="codeMirrorDialog" @getCodeMirror="getCodeData"></code-mirror>
              </el-form-item>
              <el-form-item>
                <el-button type="success" icon="el-icon-edit-outline" v-if="type == 1" @click="type = 2">新建查询</el-button>
                <el-button type="success" icon="el-icon-date" v-if="type == 2" @click="type = 1">已有查询</el-button>
                <el-button type="success" style="margin-right: 10px;">读取数据</el-button>
                <el-checkbox v-model="dataForm.checked">从缓存加载</el-checkbox>
              </el-form-item>
              <el-form-item label="图表名">
                <el-input v-model="dataForm.typeName"></el-input>
              </el-form-item>
              <el-form-item label="图表类型">
                <!-- <el-select v-model="dataForm.chartType">
                  <el-option label="表格" value="table"></el-option>
                  <el-option label="折线" value="line"></el-option>
                  <el-option label="柱状" value="bar"></el-option>
                </el-select> -->

                <div class="el-form-item__content">
                  <ul class="widget-type-list">
                    <li v-for="(type, index) in widgetTypes" @click.prevent="handleTypeClick(type, index)">
                      <el-popover placement="bottom" trigger="hover" :title="type.name">
                        <div>
                          <p><b>{{ type.row }} 行维</b></p>
                          <p><b>{{ type.column }} 列维</b></p>
                          <p><b>{{ type.measure }} 指标</b></p>
                        </div>
                        <i slot="reference" :class="[type.class, chartTypesStatus[type.value]?'':'disabled', index===activeTypeIndex?'active':'']" class="widget-type-item"></i>
                      </el-popover>
                    </li>
                  </ul>
                </div>
              </el-form-item>
              <el-form-item label="列维">
                <div style="width: 100%;min-height: 30px;border: solid 2px #e7e7e7;">
                  <draggable id="column" v-model="column" :options="{group:'field'}" style="min-height: 30px;">
                    <el-button-group v-for="(item,index) in column" :key="index" style="margin: 3px;">
                      <el-button type="info" @click="levyHandle(item)">{{item.col}}</el-button>
                      <el-button type="info" @click="columnFilterSetting('col',item)" icon="el-icon-s-flag"></el-button>
                    </el-button-group>
                    <!--                    <el-button type="info" style="margin: 3px;" v-for="(item,index) in columnList" :key="index" @click="levyHandle(item)">{{item.col}}</el-button> -->
                  </draggable>
                </div>
              </el-form-item>

              <el-form-item label="行维">
                <div style="width: 100%;min-height: 30px;border: solid 2px #e7e7e7;">
                  <draggable id="row" v-model="row" :options="{group:'field'}" style="min-height: 30px;">
                    <el-button-group v-for="(item,index) in row" :key="index" style="margin: 3px;">
                      <el-button type="info" @click="hangWeiHandle(item)">{{item.col}}</el-button>
                      <el-button type="info" @click="columnFilterSetting('row',item)" icon="el-icon-s-flag"></el-button>
                    </el-button-group>
                  </draggable>
                </div>
              </el-form-item>

              <el-form-item label="过滤">
                <div style="width: 100%;min-height: 30px;border: solid 2px #e7e7e7;">
                  <draggable id="filter" v-model="filterValue" :options="{group:'field'}" style="min-height: 30px;">
                    <span v-for="(item,index) in filterValue" :key="index">
                      <el-button-group style="margin: 3px;" v-if="item.group">
                        <el-button type="info" @click="filterHandle(item)">{{item.group}}</el-button>
                        <el-button type="info" icon="el-icon-edit-outline" @click="filterOptAddOrUpdate('update',item)"></el-button>
                      </el-button-group>
                      <el-button-group style="margin: 3px;" v-else>
                        <el-button type="info" @click="filterHandle(item)">{{item.col}}</el-button>
                        <el-button type="info" @click="columnFilterSetting(item)" icon="el-icon-s-flag"></el-button>
                      </el-button-group>
                    </span>

                  </draggable>
                </div>
              </el-form-item>
              <el-form-item label="指标">
                <div style="width: 100%;min-height: 30px;border: solid 2px #e7e7e7;">
                  <draggable id="target" v-model="targetValue" :options="{group:'target'}" style="min-height: 30px;">
                    <span v-for="(targetItem,targetIndex) in targetValue" :key="'target'+targetIndex">
                      <el-button v-if="targetItem.type == 'exp'" type="primary" @click="zhibHandle(targetItem)" style="margin: 3px;">{{targetItem.alias}}</el-button>
                      <el-button v-else type="info" @click="zhibHandle(targetItem)" style="margin: 3px;">{{targetItem.aggregate_type}}({{targetItem.col}})</el-button>
                    </span>
                  </draggable>
                </div>
              </el-form-item>
            </el-form>

            <div style="height: 33px;margin-top: 10px;">
              <div style="float: right;">
                <el-button type="primary" class="button" @click="selectList('1')">预览</el-button>
                <el-button type="primary" class="button" @click="selectList('2')">预览查询</el-button>
                <el-button type="success" class="button" @click="saveData()">保存</el-button>
                <el-button type="danger" class="button">取消</el-button>
              </div>
            </div>
            <!-- <table border>
              <tr v-for="(item,index) in tableOption.data">
                <td v-for="(term,idx) in item">{{term.data}}</td>
              </tr>
            </table> -->

            <!-- <div v-if="previewType == 'chart'">
              <div v-if="dataForm.chartType == 'table'" style="overflow: auto;">
                <chart-table ref="chartTable"></chart-table>
              </div>
              <div v-else id="main" ref="main" style="width: 600px;height:400px;"></div>
            </div>
            <div v-if="previewType == 'search'" style="overflow: auto;">
              <el-input type="textarea" rows="10" v-model="querySql"></el-input>
            </div> -->


            <div class="widget-config-tab">
              <div class="col-md-12">
                <el-tabs type="border-card">
                  <el-tab-pane label="Preview" style="overflow: auto;width: 100%;overflow: auto;">
                    <component v-if="isPreview" ref="preview" :is="currentPreview" :widget="currentPreviewWidget" :cfgJson="cfgJson" style="overflow: auto;"></component>
                  </el-tab-pane>
                  <el-tab-pane label="Query">Query</el-tab-pane>
                  <el-tab-pane label="Option">
                    <!-- <component :is="currentOptionComponent"></component> -->
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>




          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 弹窗，编辑 -->
    <!-- <edit-dialog v-if="editVisible" ref="editDialog" :title="title"></edit-dialog> -->
    <!-- 弹窗，过滤 -->
    <filter-setting v-if="filterVisible" ref="filterDialog" @defaultSet="getDefaultData"></filter-setting>
    <!-- 弹窗，过滤器 -->
    <filter-opt v-if="optVisible" ref="optDialog" @refreshFilter="refreshParams"></filter-opt>
  </div>
</template>

<script>
  const configRule = {
    line: {
      keys: 2,
      groups: -1,
      filters: -1,
      values: 2
    },
    pie: {
      keys: 2,
      groups: -1,
      filters: -1,
      values: 2
    },
    kpi: {
      keys: 0,
      groups: 0,
      filters: -1,
      values: 1
    },
    table: {
      keys: -1,
      groups: -1,
      filters: -1,
      values: -1
    },
    funnel: {
      keys: -1,
      groups: 0,
      filters: -1,
      values: 2
    },
    sankey: {
      keys: 2,
      groups: 2,
      filters: -1,
      values: 1
    },
    radar: {
      keys: 2,
      groups: -1,
      filters: -1,
      values: 2
    },
    map: {
      keys: 2,
      groups: -1,
      filters: -1,
      values: 2
    },
    scatter: {
      keys: 2,
      groups: -1,
      filters: -1,
      values: 2
    },
    gauge: {
      keys: 0,
      groups: 0,
      filters: -1,
      values: 1
    },
    wordCloud: {
      keys: 2,
      groups: 0,
      filters: -1,
      values: 1
    },
    treeMap: {
      keys: 2,
      groups: 0,
      filters: -1,
      values: 1
    },
    areaMap: {
      keys: 2,
      groups: -1,
      filters: -1,
      values: 1
    },
    // heatMapCalendar: {
    //   keys: 1,
    //   groups: 0,
    //   filters: -1,
    //   values: 1
    // },
    heatMapTable: {
      keys: 2,
      groups: 2,
      filters: -1,
      values: 1
    },
    liquidFill: {
      keys: 0,
      groups: 0,
      filters: -1,
      values: 1
    },
    contrast: {
      keys: 2,
      groups: 0,
      filters: -1,
      values: 2
    },
    chinaMap: {
      keys: 2,
      groups: -1,
      filters: -1,
      values: 2
    },
    // chinaMapBmap: {
    //   keys: 2,
    //   groups: -1,
    //   filters: -1,
    //   values: 2
    // },
    relation: {
      keys: 2,
      groups: 2,
      filters: -1,
      values: 1
    }
  };

  const widgetTypeMap = {
    table: 'TableContent',
    line: 'ChartContent',
    pie: 'ChartContent',
    contrast: 'ChartContent',
    kpi: 'KpiContent',
    map: 'MapContent',
    radar: 'RadarContent',
    funnel: 'FunnelContent',
    chinaMap: 'ChinaMapContent',
    scatter: 'ScatterContent',
  }

  import CodeMirror from '../components/CodeMirror' // 编辑器
  import draggable from 'vuedraggable' // 拖拽
  import ChartTable from '@/components/chart/table'

  import FilterSetting from '../components/filter'

  import FilterOpt from '../components/FilterOpt'

  var echarts = require('echarts');

  import {
    widgetList,
    widCategoryList,
    getDataSetOne,
    getAggregateData,
    DatasetList,
    sourList,
    saveNewWidget,
    updateWidget,
    delWidget,
    selectSql
  } from '@/api/cboard/cboard'
  import { list } from "../../../const/setting"
  import { chartDataProcess } from '../util/chartDataProcess'

  import { parseOption } from '../util/lineService'

  import {
    getToByOne,
    expAndFilterLink,
    getDataSeries,
    getDimensionConfig,
    castRawData2Series,
    parseData
  } from '../util/tools'

  export default {
    data() {
      return {
        editVisible: false,
        filterVisible: false,
        optVisible: false,
        inputShow: '',
        title: '',
        type: 1,
        fields: [],
        norms: [],
        resultDataSet: [],
        dataForm: {
          checked: true,
          datasetName: '',
          type: '',
          name: '',
          sentence: '',
          typeName: '',
          chartType: '',
        },
        previewType: 'chart',
        datasetId: '',
        saveWidgetData: {
          name: '',
          categoryName: '',
          data: {
            config: {
              chart_type: '',
              keys: [],
              values: [{
                name: '',
                cols: []
              }],
              groups: [{
                col: '',
                values: [],
                sort: '',
                id: '',
                type: '',
              }],
              filters: [],
              option: {},
            },
            datasetId: '',
            expressions: [],
            filterGroups: []
          },
          id: ''
        },
        AggregateStr: {
          reload: '',
          datasetId: '',
          datasourceId: '',
          query: '',
          cfg: {
            rows: [],
            columns: {
              columnName: '',
              filterType: '',
              values: '',
              id: ''
            },
            filters: [],
            values: {
              column: '',
              aggType: '',
            },
          },
        },
        dataSet: {},
        dataWidget: {},
        sour: [],
        selectorList: [{
            value: 1,
            label: 'Elasticsearch'
          },
          {
            value: 2,
            label: 'Solr'
          },
          {
            value: 3,
            label: 'saiku'
          },
          {
            value: 4,
            label: 'TextFile'
          },
          {
            value: 5,
            label: 'jdbc'
          },
          {
            value: 6,
            label: 'kylin'
          },
        ],
        filterText: '',
        CategOptions: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        // 字段名
        fieldName: [],
        columnList: [],
        rowList: [],
        filterValue: [],
        targetValue: [],
        dimensionList: [],
        targetList: [],
        expressionList: [],
        filterList: [],
        source: [],
        first_header: [],
        second_header: [],
        resultData: [],
        tableOption: {},
        querySql: [],



        cfgJson: '',
        currentNode: {}, // 点击 widget 目录，选中的 node（即当前选中的 Widget 对象）
        currentOption: {}, // option-样式配置
        activeTypeIndex: 0, // 当前选中的 Widget Type 索引
        widgetConfigVisible: false, // 配置面板是否显示
        column: [], // Column 的值
        row: [], // Row 的值
        filter: [], // Filter 的值
        value: [], // Value 的值
        currentPreview: '',
        currentPreviewWidget: {},
        isPreview: false, // 是否显示预览
        option: {
          value: {
            orient: ''
          }
        },
        orientOptions: ['horizontal', 'vertical'],
        /*
          widget Type 列表
          {row}   行维
          {column}  列维
          {measure} 指标
        */
        widgetTypes: [{
            name: '表格',
            value: 'table',
            class: 'cTable',
            row: '0个或多个',
            column: '0个或多个',
            measure: '0个或多个'
          }, {
            name: '折线/柱状图',
            value: 'line',
            class: 'cLine',
            row: '1个或多个',
            column: '0个或多个',
            measure: '1个或多个'
          },
          {
            name: '对比图',
            value: 'contrast',
            class: 'cContrast',
            row: '1个或多个',
            column: '0',
            measure: '1个或多个'
          },
          {
            name: '散点图/气泡图',
            value: 'scatter',
            class: 'cScatter',
            row: '1个或多个',
            column: '0个或多个',
            measure: '1个或多个'
          },
          {
            name: '饼图',
            value: 'pie',
            class: 'cPie',
            row: '1个或多个',
            column: '0个或多个',
            measure: '1个或多个'
          },
          {
            name: '指标卡',
            value: 'kpi',
            class: 'cKpi',
            row: '0',
            column: '0',
            measure: '1'
          },
          {
            name: '漏斗图',
            value: 'funnel',
            class: 'cFunnel',
            row: '0个或多个',
            column: '0',
            measure: '1个或多个'
          },
          // {
          //   name: '桑基图',
          //   value: 'sankey',
          //   class: 'cSankey',
          //   row: '1个或多个',
          //   column: '0个或多个',
          //   measure: '1'
          // },
          {
            name: '雷达图',
            value: 'radar',
            class: 'cRadar',
            row: '1个或多个',
            column: '0个或多个',
            measure: '1个或多个'
          },
          // {
          //   name: '中国地图',
          //   value: 'map',
          //   class: 'cMap',
          //   row: '1个或多个',
          //   column: '0个或多个',
          //   measure: '1个或多个'
          // },
          // {
          //   name: '计量图',
          //   value: 'gauge',
          //   class: 'cGauge',
          //   row: '0',
          //   column: '0',
          //   measure: '1'
          // },
          // {
          //   name: '标签云',
          //   value: 'wordCloud',
          //   class: 'cWordCloud',
          //   row: '1个或多个',
          //   column: '0',
          //   measure: '1'
          // },
          // {
          //   name: '矩形树图',
          //   value: 'treeMap',
          //   class: 'cTreeMap',
          //   row: '1个或多个',
          //   column: '0',
          //   measure: '1'
          // },
          // {
          //   name: '热点图（日历）',
          //   value: 'heatMapCalendar',
          //   class: 'cHeatMapCalendar',
          //   row: '1',
          //   column: '0',
          //   measure: '1'
          // },
          // {
          //   name: '热点图（表格）',
          //   value: 'heatMapTable',
          //   class: 'cHeatMapTable',
          //   row: '1个或多个',
          //   column: '1个或多个',
          //   measure: '1'
          // },
          // {
          //   name: '水球图',
          //   value: 'liquidFill',
          //   class: 'cLiquidFill',
          //   row: '0',
          //   column: '0',
          //   measure: '1'
          // },
          // {
          //   name: '区域地图',
          //   value: 'areaMap',
          //   class: 'cAreaMap',
          //   row: '1个或多个',
          //   column: '0个或多个',
          //   measure: '1'
          // },
          {
            name: '中国地图（本地）',
            value: 'chinaMap',
            class: 'cChinaMap',
            row: '1个或多个',
            column: '0个或多个',
            measure: '1个或多个'
          },
          // {
          //   name: '中国地图（百度）',
          //   value: 'chinaMapBmap',
          //   class: 'cChinaMapBmap',
          //   row: '1个或多个',
          //   column: '0个或多个',
          //   measure: '1个或多个'
          // },
          // {
          //   name: '关系图',
          //   value: 'relation',
          //   class: 'cRelation',
          //   row: '1个或2个',
          //   column: '1个或2个',
          //   measure: '1'
          // },
        ],
        baseChartTypesStatus: {
          "line": true,
          "pie": true,
          "kpi": true,
          "table": true,
          "funnel": true,
          "sankey": true,
          "radar": true,
          "map": true,
          "scatter": true,
          "gauge": true,
          "wordCloud": true,
          "treeMap": true,
          // "heatMapCalendar": true,
          "heatMapTable": true,
          "liquidFill": true,
          "areaMap": true,
          "contrast": true,
          "chinaMap": true,
          // "chinaMapBmap": true,
          "relation": true
        }
      }
    },
    components: {
      CodeMirror,
      draggable,
      ChartTable,
      FilterSetting,
      FilterOpt,
      //---图表---
      KpiContent: () => import('@/components/dashboard/widgets/KpiContent'),
      ChartContent: () => import('@/components/dashboard/widgets/ChartContent'),
      TableContent: () => import('@/components/dashboard/widgets/TableContent'),
      MapContent: () => import('@/components/dashboard/widgets/MapContent'),
      RadarContent: () => import('@/components/dashboard/widgets/RadarContent'), //雷达图
      FunnelContent: () => import('@/components/dashboard/widgets/FunnelContent'), //漏斗图
      ScatterContent: () => import('@/components/dashboard/widgets/ScatterContent'),
      ChinaMapContent: () => import('@/components/dashboard/widgets/ChinaMapContent'),
    },
    computed: {
      treeData() {
        let widgetList = this.widgetList;
        let treeData = [];
        for (let i = 0, l = widgetList.length; i < l; i++) {
          let widget = widgetList[i];
          addToTree(widget.categoryName, widget)
        }

        function addToTree(categoryName, widget) {
          let nameArr = categoryName.split('/');
          let name;
          let i = 0;
          let arr = treeData;
          while (i < nameArr.length) {
            name = nameArr[i];
            let result = existInArr(name, arr);
            if (result) {
              arr = result.children;
              if (i === nameArr.length - 1) {
                result.children.push(widget);
              }
            } else {
              let treeItem = {
                name: name,
                children: []
              };
              arr.push(treeItem);
              arr = treeItem.children;
              if (i === nameArr.length - 1) {
                treeItem.children.push(widget);
              }
            }
            i++;
          }
        }

        function existInArr(name, arr) {
          for (let i = 0, l = arr.length; i < l; i++) {
            if (arr[i].name === name) {
              return arr[i];
            }
          }
          return false;
        }

        return treeData;
      },
      /*
        根据选中的 widget 数据，
        判断哪些 Widget Type 可选
      */
      chartTypesStatus() {
        // if (!this.currentNode.data) {
        //   return {};
        // }
        let result;
        let tempConfig = {
          keys: this.row.length,
          groups: this.column.length,
          values: 0
        }
        for (let type in this.baseChartTypesStatus) {
          let rule = configRule[type];
          // 计算 value 的长度
          let length = 0;
          this.value.forEach(v => {
            v.cols.forEach(c => {
              length++;
            });
          });
          tempConfig.values = length;

          for (let p in rule) {
            if (rule[p] === 2) {
              result = (tempConfig[p] >= 1);
            } else if (rule[p] === -1) {
              result = true;
            } else {
              result = (rule[p] === tempConfig[p]);
            }
            if (!result) break;
          }

          this.baseChartTypesStatus[type] = result;
        }

        return this.baseChartTypesStatus;
      },
      // 当前选中的 widget 配置数据
      currentWidgetConfig() {
        this.isPreview = false;
        let config = {};

        // 图表水平or垂直显示，用于 bar 图
        if (this.currentNode.data.config.valueAxis !== undefined) config.valueAxis = this.currentNode.data.config.valueAxis;

        // 设置 widgetType
        let type = this.widgetTypes[this.activeTypeIndex];
        config.chart_type = type.value;

        // 设置 keys（对应 Row 的值）
        config.keys = this.row;

        // 设置 groups（对应 Column 的值）
        config.groups = this.column;

        // 设置 option
        config.option = this.currentOption;

        /*filters 格式：
        [
          {
            col: 'SALES_COUNTRY',
            type: '=',
            values: ['Mexico']
          }
        ]*/
        // TODO: filterInput 的数据转成 this.filters 格式，发现 filterInput 的数据格式有很多冗余和不合理，需要后续处理
        // let filters = [];
        // this.filterInput.forEach(filter => {
        //   let item = {
        //     col: filter.label,
        //     filterId: filter.key,
        //     paramType: filter.param.paramType,
        //     type: '=',
        //     values: [filter.value]
        //   }
        //   filters.push(item)
        // })
        // //config.filters = this.filters;
        // config.filters = filters;

        // 设置 values（对应 value 的值）
        for (let i = this.value.length - 1; i >= 0; i--) {
          this.value[i].cols.forEach(c => {
            if (!c.aggregate_type) c.aggregate_type = 'sum'; // 必须要有字段 aggregate_type，默认 'sum'
            if (!c.col) c.col = c.column; //必须要有个 col 字段记录名称，否则返回回的数据 columnList 中对应的 name 为 null
          })
        }

        config.values = this.value;

        return config;
      },

    },
    created() {
      this.getWidgetCategoryList();

      this.getDatasetList();
      this.getSourList();
    },
    methods: {
      /*获取数据源*/
      getSourList() {
        sourList().then(response => {
          this.soursOptions = response.data
          let list = []
          this.soursOptions.forEach(item => {
            list.push(item.name)
          })
          this.sour = list
        })
      },
      /*获取图标集分类*/
      getWidgetCategoryList() {
        this.CategOptions = [];
        widCategoryList().then(response => {
          let resultData = response.data
          let list = []
          resultData.forEach((item, index) => {
            let obj = {}
            obj.parentId = 0
            obj.id = index
            obj.name = item
            obj.children = []
            list.push(obj)
          })
          this.CategOptions = list
          this.getWidgetList();
        })
      },
      /*获取图表集*/
      getWidgetList() {
        widgetList().then(response => {
          let resultData = response.data
          resultData.forEach((item, index) => {
            for (let i = 0; i < this.CategOptions.length; i++) {
              if (item.categoryName == this.CategOptions[i].name) {
                item.parentId = this.CategOptions[i].id
                item.children = []
                this.CategOptions[i].children.push(item)
              }
            }
          })
        })
      },
      // 获取图表数据
      getWgtData(data, node) {
        if (node.isLeaf) {
          this.dataWidget = data
          this.datasetId = data.data.datasetId
          this.targetValue = data.data.config.values[0].cols;
          // this.columnList = data.data.config.groups;
          this.filterValue = data.data.config.filters;
          this.rowList = data.data.config.keys;
          this.dataForm.typeName = data.name;
          this.dataForm.chartType = data.data.config.chart_type;
          getDataSetOne(this.datasetId).then(response => {
            this.dataSet = response.data;
            this.dataForm.datasetName = response.data.name;
            let ds = response.data.data;
            let jsonStr = JSON.parse(ds);
            this.fields = jsonStr.schema.dimension
            this.norms = jsonStr.schema.measure
            let dimension = jsonStr.schema.dimension //  维度列
            let measure = jsonStr.schema.measure //  指标列
            let expressions = jsonStr.expressions //  表达式
            let filters = jsonStr.filters // 过滤器

            this.dimensionList = getToByOne(this.columnList, this.rowList, dimension);
            this.targetList = getToByOne(this.targetValue, [], measure);
            this.expressionList = expAndFilterLink(this.targetValue, expressions)
            this.filterList = expAndFilterLink(this.filterValue, filters)

            console.log(this.filterList)
          })
        }
      },
      //  保存图表
      saveData() {
        this.saveWidgetData.id = this.dataWidget.id;
        this.saveWidgetData.name = this.dataForm.typeName;
        this.saveWidgetData.categoryName = this.dataWidget.categoryName;
        this.saveWidgetData.data.config.chart_type = this.dataForm.chartType;
        if (this.rowList) {
          this.saveWidgetData.data.config.keys = this.rowList
        }
        if (this.targetValue) {
          this.saveWidgetData.data.config.values[0].cols = [];
          let vel = this.saveWidgetData.data.config.values[0].cols;
          for (let i = 0; i < this.targetValue.length; i++) {
            let obj = {
              col: this.targetValue[i].col,
              aggregate_type: 'sum'
            }
            vel.push(obj)
          }
        }
        if (this.column) {
          this.saveWidgetData.data.config.groups = this.column
        }
        if (this.filterValue) {
          this.saveWidgetData.data.config.filters = this.filterValue;
        }
        this.saveWidgetData.data.datasetId = this.dataSet.id;
        let WidJson = JSON.stringify(this.saveWidgetData);
        if (this.dataWidget.id == null || this.dataWidget.id == '') {
          saveNewWidget({
            mapStr: WidJson
          }).then(() => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.getWidgetCategoryList();
            this.getWidgetList();
          })
        } else {
          updateWidget({
            mapStr: WidJson
          }).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getWidgetCategoryList();
            this.getWidgetList();
          })
        }
      },


      /*预览*/
      selectList(item) {
        let that = this
        this.isPreview = true
        let ds = this.dataSet.data;
        let jsonStr = {}
        if (ds) {
          jsonStr = JSON.parse(ds)
          console.log(jsonStr)
        } else {
          this.$message.error('图标部分配置出错,请检查配置后在进行预览')
          return false
        }

        let chartConfig = this.saveWidgetData.data.config;
        chartConfig.keys = this.row
        chartConfig.groups = this.column
        if (this.targetValue) {
          let colsList = []
          for (let i = 0; i < this.targetValue.length; i++) {
            if (this.targetValue[i].type == 'exp') {
              let obj = {
                alias: this.targetValue[i]['alias'],
                exp: this.targetValue[i]['exp'],
                timestamp: this.targetValue[i]['timestamp'],
                type: this.targetValue[i]['type'],
              }
              colsList.push(obj)
            } else {
              let obj = {
                col: this.targetValue[i].col,
                aggregate_type: 'sum'
              }
              colsList.push(obj)
            }
          }
          this.saveWidgetData.data.config.values[0].cols = colsList
        }

          this.AggregateStr.reload = false;
          this.AggregateStr.query = jsonStr.query.sql;
          this.AggregateStr.datasourceId = jsonStr.datasource;
          this.AggregateStr.datasetId = this.dataSet.id;
          let dataSeries = getDataSeries(chartConfig);
          this.AggregateStr.cfg.rows = getDimensionConfig(this.row);
          this.AggregateStr.cfg.columns = getDimensionConfig(this.column);
          this.AggregateStr.cfg.filters = getDimensionConfig(this.filterValue);
          this.AggregateStr.cfg.values = _.map(dataSeries, function(s) {
            if (s.type == 'exp') {
              return {
                alias: s.alias,
                exp: s.exp,
                timestamp: s.timestamp,
                type: s.type,
              }
            } else {
              return {
                column: s.name,
                aggType: s.aggregate
              };
            }
          });
          // getDimensionConfig(chartConfig.values);
          this.cfgJson = JSON.stringify(this.AggregateStr);

          if (item == '1') {
            this.previewType = 'chart'
            getAggregateData({
              mapStr: this.cfgJson
            }).then(response => {
              // var result = castRawData2Series(response.data, chartConfig);
              var result = parseData(response.data, chartConfig)
              // result.chartConfig = chartConfig;
              this.$nextTick(() => {
                this.$refs.preview.initByWidget(result)
              })

              // 折线图-柱形图
              // if (this.dataForm.chartType == 'line' || this.dataForm.chartType == 'bar') {
              //   this.chartShow(parseOption(result, this.dataForm.chartType))
              // } else {
              //   this.tableOption = chartDataProcess(result.chartConfig, result.keys, result.series, result.data,result.seriesConfig);
              //   this.$nextTick(() => {
              //     this.$refs.preview.initByWidget(this.tableOption)
              //     // this.$refs.chartTable.init(this.tableOption)
              //   })
              // }
            })
          } else {
            this.previewType = 'search'
            /*预览查询*/
            selectSql({
              mapStr: this.cfgJson
            }).then(response => {
              this.querySql = response.data;
            })
          }
      },

      // 树结构查询事件
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 获取查询语句
      getCodeData(data) {
        this.$set(this.dataForm, 'sentence', data)
      },
      endDrag(evt) {
        let name = evt.clone.textContent
        if (evt.to.id === 'column') {
          let code = this.column.slice(-1) || 0
          this.column[evt.newIndex] = {
            type: '=',
            col: name,
            sort: 'asc',
            id: '',
            values: []
          }
          this.column = [...this.column]
        } else if (evt.to.id === 'row') {
          let code = this.row.slice(-1) || 0
          this.row[evt.newIndex] = {
            type: '=',
            col: name,
            sort: 'asc',
            id: '',
            values: []
          }
          this.row = [...this.row]
        } else if (evt.to.id === 'filter') {
          let code = this.filterValue.slice(-1) || 0
          this.filterValue[evt.newIndex] = {
            type: '=',
            col: name,
            sort: 'asc',
            id: '',
            values: []
          }
          this.filterValue = [...this.filterValue]
        }
      },
      endDragTar(evt) {
        let name = evt.clone.textContent
        let sum = 'sum'
        if (evt.to.id === 'target') {
          this.targetValue[evt.newIndex] = {
            type: 'column',
            aggregate_type: sum,
            col: name,
            id: ''
          }
          this.targetValue = [...this.targetValue]
        }
      },
      //
      endDragExp(evt) {
        let name = evt.clone.textContent
        if (evt.to.id === 'target') {
          this.targetValue[evt.newIndex] = {
            alias: name,
            timestamp: evt.item.children[2].value,
            type: evt.item.children[3].value,
            exp: evt.item.children[4].value,
          }
        }
      },
      // 新增可选过滤
      filterOptAddOrUpdate(type, data) {
        let list = this.norms.concat(this.fields)
        this.optVisible = true
        this.$nextTick(() => {
          this.$refs.optDialog.init(type, this.datasetId, data, list)
        })
      },
      // 获取过滤器数据
      refreshParams(data){
        if(data.type == 'update'){
          this.filterList.forEach((item,index) => {
            if(item.timestamp == data.data.timestamp){
              this.filterList[index] = data.data
            }
          })
        }else{
          this.filterList.push(data)
        }
        this.filterList = [...this.filterList]
      },
      //  拖动过滤器
      endDragFilter(evt) {
        let name = evt.clone.textContent
        if (evt.to.id === 'target') {
          this.targetValue[evt.newIndex] = {
            group: name,
            timestamp: evt.item.children[2].value,
            filters: evt.item.children[3].value
          }
        }
      },
      // 删除过滤器
      filterItemDelHandle(index) {
        this.filterList.splice(index, 1)
      },
      // 列维点击
      levyHandle(data) {
        this.dimensionList.push({
          column: data.col
        })
        this.column.forEach((item, index) => {
          if (item.col == data.col) {
            this.column.splice(index, 1)
          }
        })
      },
      // 行维点击
      hangWeiHandle(data) {
        this.dimensionList.push({
          column: data.col
        })
        this.row.forEach((item, index) => {
          if (item.col == data.col) {
            this.row.splice(index, 1)
          }
        })
      },
      // 已选过滤点击
      filterHandle(data) {
        if (data.group) {
          this.filterList.push(data)
          this.filterValue.forEach((item, index) => {
            if (item.timestamp == data.timestamp) {
              this.filterValue.splice(index, 1)
            }
          })
        } else {
          this.filterValue.forEach((item, index) => {
            if (item.col == data.col) {
              this.filterValue.splice(index, 1)
            }
          })
        }
      },
      // 指标点击
      zhibHandle(data) {
        if (data.type == 'exp') {
          this.expressionList.push(data)
          this.targetValue.forEach((item, index) => {
            if (item.timestamp == data.timestamp) {
              this.targetValue.splice(index, 1)
            }
          })
        } else {
          this.targetList.push({
            column: data.col
          })
          this.targetValue.forEach((item, index) => {
            if (item.col == data.col) {
              this.targetValue.splice(index, 1)
            }
          })
        }
      },
      // 列维过滤
      columnFilterSetting(type, row) {
        this.filterVisible = true

        // let ds = this.dataSet.data;
        // let jsonStr = {}
        // if (ds) {
        //   jsonStr = JSON.parse(ds);
        // } else {
        //   this.$message.error('图标部分配置出错,请检查配置后在进行预览')
        //   return false
        // }
        // let chartConfig = this.saveWidgetData.data.config;
        // chartConfig.keys = this.rowList
        // chartConfig.groups = this.columnList
        // if (this.targetValue) {
        //   for (let i = 0; i < this.targetValue.length; i++) {
        //     console.log(this.targetValue[i])
        //     if(this.targetValue[i].type != 'exp'){
        //       let obj = {
        //         col: this.targetValue[i].col,
        //         aggregate_type: 'sum'
        //       }
        //       this.saveWidgetData.data.config.values[0].cols.push(obj)
        //     }
        //   }
        // }

        // this.AggregateStr.reload = false;
        // this.AggregateStr.query = jsonStr.query.sql;
        // this.AggregateStr.datasourceId = jsonStr.datasource;
        // this.AggregateStr.datasetId = this.dataSet.id;
        // let dataSeries = getDataSeries(chartConfig);
        // this.AggregateStr.cfg.rows = getDimensionConfig(this.rowList);
        // this.AggregateStr.cfg.columns = getDimensionConfig(this.columnList);
        // this.AggregateStr.cfg.filters = getDimensionConfig(this.filterValue);
        // this.AggregateStr.cfg.values = _.map(dataSeries, function(s) {
        //   return {
        //     column: s.name,
        //     aggType: s.aggregate
        //   };
        // });
        console.log(this.datasetId)
        this.$nextTick(() => {
          this.$refs.filterDialog.init(type, row, this.datasetId)
        })
      },
      //  获取字段默认值
      getDefaultData(row) {
        console.log(row)
        if (row.type == 'col') {
          this.columnList.forEach((item, index) => {
            if (item.col == row['data'].col) {
              this.columnList[index] = row['data']
            }
          })
        } else if (row.type == 'row') {
          this.rowList.forEach((item, index) => {
            if (item.col == row['data'].col) {
              this.rowList[index] = row['data']
            }
          })
        }
      },
      /*获取数据集*/
      getDatasetList() {
        DatasetList().then(response => {
          let resultData = response.data;
          for (let i = 0; i < resultData.length; i++) {
            let obj = {
              id: resultData[i].id,
              name: resultData[i].name
            }
            this.resultDataSet.push(obj)
          }
          // console.log(this.resultDataSet)
        })
      },
      /*获取数据集数据*/
      dataSetOne(id) {
        getDataSetOne(id).then(response => {
          this.dataSet = response.data;
          let ds = response.data.data;
          let jsonStr = JSON.parse(ds);
          this.dimensionList = jsonStr.schema.dimension;
          this.targetList = jsonStr.schema.measure;
          this.expressionList = jsonStr.expressions;
          this.filterList = jsonStr.filters;
          this.dataForm.datasetName = response.data.name;

        })
      },
      chartShow(option) {
        let myChart = echarts.init(document.getElementById('main'));

        myChart.setOption(option);
      },
      deleteReset() {
        let name = this.dataWidget.name;
        this.$confirm('是否确认删除名称为' + name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delWidget(name)
        }).then(data => {
          this.$message.success('删除成功')
          this.searchReset();
          this.getWidgetCategoryList();
          this.getWidgetList();
        })
      },
      //清空
      searchReset() {
        this.dataForm = {
            checked: true,
            datasetName: '',
            type: '',
            name: '',
            sentence: '',
            typeName: '',
            chartType: '',
          },
          this.dataWidget.id = '';
        this.saveWidgetData.id = '';
        this.column = [];
        this.row = [];
        this.filterValue = [];
        this.targetValue = [];
        this.dimensionList = [];
        this.targetList = [];
      },


      handleNodeClick(node,data) {
        if (node.children && node.children.length > 0) {
          return;
        } else {
          this.widgetConfigVisible = true;
          this.datasetId = node.data.datasetId
          this.currentNode = node;
          this.currentOption = node.data.config.option || {};
          this.targetValue = node.data.config.values[0].cols;
          this.filterValue = node.data.config.filters;
          this.column = node.data.config.groups;
          this.row = node.data.config.keys;
          this.value = node.data.config.values;
          if (this.value.length === 0) { //防止undefined报错的处理
            this.value.push({
              cols: []
            })
          }
          getDataSetOne(this.datasetId).then(response => {
            this.dataSet = response.data;
            this.dataForm.datasetName = response.data.name;
            let ds = response.data.data;
            let jsonStr = JSON.parse(ds);
            this.fields = jsonStr.schema.dimension
            this.norms = jsonStr.schema.measure
            let dimension = jsonStr.schema.dimension //  维度列
            let measure = jsonStr.schema.measure //  指标列
            let expressions = jsonStr.expressions //  表达式
            let filters = jsonStr.filters // 过滤器

            this.dimensionList = getToByOne(this.column, this.row, dimension);
            this.targetList = getToByOne(this.targetValue, [], measure);
            this.expressionList = expAndFilterLink(this.targetValue, expressions)
            this.filterList = expAndFilterLink(this.filterValue, filters)
          })

          //---Filter 相关----
          // let schema = this.schemaToSelect(this.currentSchema);
          // this.filterData = [];
          // schema.forEach(item => {
          //   let filterDataItem = {
          //     label: item.column,
          //     key: item.id
          //   };

          //   filterDataItem.param = {
          //     cfg: {},
          //     col: [{
          //       column: item.column,
          //       datasetId: this.currentNode.data.datasetId,
          //       name: 'FoodMart_Sample'
          //     }],
          //     name: item.column,
          //     paramType: 'selector',
          //     type: '=',
          //     values: [],
          //     selects: []
          //   };

          //   this.filterData.push(filterDataItem);
          // })

          // this.filterInput = [];
          // this.selectedFilterData = [];
          // let filters = node.data.config.filters;
          // if (filters && filters.length > 0) {
          //   filters.forEach(filter => {
          //     this.filterData.forEach(f => {
          //       if (filter.filterId === f.key) {
          //         f.value = filter.values[0];
          //         this.filterInput.push(f);
          //         //this.selectedFilterData.push(f);
          //       }
          //     })
          //   })
          // }

          // 根据图表类型获得索引，根据索引展示 widget type
          let index = this.getIndexByType(node.data.config.chart_type);
          this.activeTypeIndex = index;
          let type = this.widgetTypes[this.activeTypeIndex];

          let typeStr = type.value;
          this.currentPreview = widgetTypeMap[typeStr] ? widgetTypeMap[typeStr] : 'ChartContent'
          let widget = {
            name: ''
          }
          let widgetData = {
            name: this.currentNode.name,
            categoryName: this.currentNode.categoryName,
            data: this.currentNode.data,
            id: this.currentNode.id
          }
          widgetData.data.config = this.currentWidgetConfig
          widget.widget = widgetData;
          this.currentPreviewWidget = widget
        }
      },
      getIndexByType(type) {
        for (let i = 0, l = this.widgetTypes.length; i < l; i++) {
          if (this.widgetTypes[i].value === type) {
            return i;
          }
        }
        return 0;
      },
      handleTypeClick(type, index) {
        let typeValue = type.value;
        if (!this.chartTypesStatus[typeValue]) {
          return false;
        }
        this.activeTypeIndex = index;

        // value axis 切换到 value 时，currentValue 数据格式的处理
        if (this.axisValueType === 'normal') {
          for (let i = this.value.length - 1; i >= 0; i--) {
            let item = this.value[i];
            if (i > 0) {
              this.value[0].cols = this.value[0].cols.concat(item.cols);
              this.value.splice(i, 1);
            }
          }
        }

        /*
          切换 widgetType，碰到有 Value Axis 的表单时，初始化下拉框的默认值
        */
        // console.log(this.valueAxisOption)
        this.value.forEach(v => {
          if (this.valueAxisOption) {
            let inArr = false;
            this.valueAxisOption.forEach(option => {
              if (option === v.series_type) inArr = true;
            })
            if (!inArr) v.series_type = this.valueAxisOption[0];
          }
        })

        // console.log(this.value)

        // 当前预览的组件名
        let typeStr = this.widgetTypes[this.activeTypeIndex].value;
        this.currentPreview = widgetTypeMap[typeStr] ? widgetTypeMap[typeStr] : 'ChartContent'
        // 当前预览的组件数据
        let widget = {
          name: ''
        }
        let widgetData = {
          name: this.currentNode.name,
          categoryName: this.currentNode.categoryName,
          data: this.currentNode.data,
          id: this.currentNode.id
        }
        widgetData.data.config = this.currentWidgetConfig
        widget.widget = widgetData;
        this.currentPreviewWidget = widget
      },
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  }
</script>

<style lang="scss" scoped>
  .small-btn {
    position: relative;
    top: -2px;
    margin-left: 6px;
    padding: 3px;
  }

  .mod-config {
    padding: 10px 15px;
  }

  /deep/ .el-card {
    background-color: #fff;
  }

  /deep/ .el-card__body {
    padding: 0;
    padding-bottom: 20px;
  }

  .box-card .item {
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: solid 1px #e7e7e7;
  }

  .search {
    padding: 20px 20px 0 20px;
  }

  .filter-tree {
    margin-top: 20px;
  }

  /deep/ .el-tree {
    background-color: #fff;
  }

  .field-ul {
    padding-left: 24px;

    li {
      padding-left: 10px;
    }
  }


  .widget-type-list {
    padding: 0;
    margin: 0;
  }

  .widget-type-list>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
  }

  .widget-type-list>li .widget-type-item {
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

  .widget-type-list>li .widget-type-item.active {
    border: 2px solid #97b6f7;
  }

  li:focus,
  i:focus,
  span:focus {
    outline: none;
  }

  /*######### Widget Type Icon 样式 ##############*/
  .cLine {
    background-image: url(../../../const/cboard/widgets/line-active.png);
  }

  .cLine.disabled {
    background-image: url(../../../const/cboard/widgets/line.png);
  }

  .cContrast {
    background-image: url(../../../const/cboard/widgets/contrast-active.png);
  }

  .cContrast.disabled {
    background-image: url(../../../const/cboard/widgets/contrast.png);
  }

  /*.cBar{  background-image: url(../imgs/bar-active.png);  }*/
  /*.cBar.disabled{background-image: url(../imgs/bar.png);  }*/
  .cScatter {
    background-image: url(../../../const/cboard/widgets/scatter-active.png);
  }

  .cScatter.disabled {
    background-image: url(../../../const/cboard/widgets/scatter.png);
  }

  .cPie {
    background-image: url(../../../const/cboard/widgets/pie-active.png);
  }

  .cPie.disabled {
    background-image: url(../../../const/cboard/widgets/pie.png);
  }

  .cFunnel {
    background-image: url(../../../const/cboard/widgets/funnel-active.png);
  }

  .cFunnel.disabled {
    background-image: url(../../../const/cboard/widgets/funnel.png);
  }

  .cKpi {
    background-image: url(../../../const/cboard/widgets/kpi-active.png);
  }

  .cKpi.disabled {
    background-image: url(../../../const/cboard/widgets/kpi.png);
  }

  .cSankey {
    background-image: url(../../../const/cboard/widgets/sankey-active.png);
  }

  .cSankey.disabled {
    background-image: url(../../../const/cboard/widgets/sankey.png);
  }

  .cRadar {
    background-image: url(../../../const/cboard/widgets/radar-active.png);
  }

  .cRadar.disabled {
    background-image: url(../../../const/cboard/widgets/radar.png);
  }

  .cTable {
    background-image: url(../../../const/cboard/widgets/table-active.png);
  }

  .cTable.disabled {
    background-image: url(../../../const/cboard/widgets/table.png);
  }

  .cMap {
    background-image: url(../../../const/cboard/widgets/map-active.png);
  }

  .cMap.disabled {
    background-image: url(../../../const/cboard/widgets/map.png);
  }

  .cGauge {
    background-image: url(../../../const/cboard/widgets/gauge-active.png);
  }

  .cGauge.disabled {
    background-image: url(../../../const/cboard/widgets/gauge.png);
  }

  .cWordCloud {
    background-image: url(../../../const/cboard/widgets/wordCloud-active.png);
  }

  .cWordCloud.disabled {
    background-image: url(../../../const/cboard/widgets/wordCloud.png);
  }

  .cTreeMap {
    background-image: url(../../../const/cboard/widgets/treeMap-active.png);
  }

  .cTreeMap.disabled {
    background-image: url(../../../const/cboard/widgets/treeMap.png);
  }

  .cAreaMap {
    background-image: url(../../../const/cboard/widgets/areaMap-active.png);
  }

  .cAreaMap.disabled {
    background-image: url(../../../const/cboard/widgets/areaMap.png);
  }

  .cHeatMapCalendar {
    background-image: url(../../../const/cboard/widgets/heatMapCalendar-active.png);
  }

  .cHeatMapCalendar.disabled {
    background-image: url(../../../const/cboard/widgets/heatMapCalendar.png);
  }

  .cHeatMapTable {
    background-image: url(../../../const/cboard/widgets/heatMapTable-active.png);
  }

  .cHeatMapTable.disabled {
    background-image: url(../../../const/cboard/widgets/heatMapTable.png);
  }

  .cLiquidFill {
    background-image: url(../../../const/cboard/widgets/liquidFill-active.png);
  }

  .cLiquidFill.disabled {
    background-image: url(../../../const/cboard/widgets/liquidFill.png);
  }

  .cChinaMap {
    background-image: url(../../../const/cboard/widgets/chinaMap-active.png);
  }

  .cChinaMap.disabled {
    background-image: url(../../../const/cboard/widgets/chinaMap.png);
  }

  .cChinaMapBmap {
    background-image: url(../../../const/cboard/widgets/chinaMapBmap-active.png);
  }

  .cChinaMapBmap.disabled {
    background-image: url(../../../const/cboard/widgets/chinaMapBmap.png);
  }

  .cRelation {
    background-image: url(../../../const/cboard/widgets/relation-active.png);
  }

  .cRelation.disabled {
    background-image: url(../../../const/cboard/widgets/relation.png);
  }
</style>
